<template>
  <div>
    <a href="https://www.baidu.com" @click.prevent>链接</a>
    <div @click.capture="show('这个是父元素')">
      <button @click.once="show('这个是子元素')">点击</button>
    </div>
    <div @click="show('这个是父元素1')">
      <div @click.self="show('这个是元素')">
        <button @click.stop="show('这个是子元素1')">点击</button>
      </div>
    </div>
    <div>
      <input type="text" @keyup.enter="show('捕获到')" />
      <input type="text" @click.left="show('捕获到鼠标按钮')" />
    </div>
  </div>
</template>

<script setup>
const show = (message) => console.log(message);
</script>

<style lang="scss" scoped></style>
